<template>
	<view class="goods-item">
		<u-card :body-style="{
			backgroundColor:'rgb(250,250,250)'
		}"
		:head-style="{}"
		 margin="-10rpx 0" :border="false" border-radius="30" :full="true" title-color="#fff" title-size="40"> 
			
			<view class="head" slot="head">
				<u-icon name="integral-fill" color="#2979ff" size="40"></u-icon>
				<text style="margin-left: 10px;font-size: 15px;">{{goods.goods_name.substring(0,4)+'旗舰店'}}</text>
			</view>
			<!-- 商品左侧图片区域 -->
			<view @click.stop="gotoDetail(goods)" class="goods-item-left" slot="body">
				<radio style="transform: translateX(-7px);" @click.stop="radioClickHandler(goods)" v-if="isShowRadio" :checked="goods.goods_state" color="#c00000"></radio>
				<image class="goods-pic" :src="goods.goods_small_logo || defaultPic"></image>
				<!-- 商品右侧信息区域 -->
				<view class="goods-item-right">
					<!-- 名字 -->
					<view class="goods-name">{{goods.goods_name}}</view>
					<!-- 价格 -->
					<view @click.stop="" class="goods-info-box">
						<view class="goods-price">¥ {{goods.goods_price | toFixed}}</view>
						<u-number-box type="number" :max="99" :min="1" v-if="showNum" v-model="goods.goods_count" @change="changeHanlder"></u-number-box>
					</view>
			</view>
			</view>
			
			<!-- <slot name="bottom">12312</slot> -->
		</u-card>
		
	</view>
</template>
	
<script>
	export default {
		name:"my-goods",
		props:{
			goods:{ //渲染列表数据源
				default:{},
				required:true,
				type:Object
			},
			isShowRadio:{ //是否显示选中
				default:false,
				type:Boolean
			},
			showNum:{ //是否计数器
				default:false,
				type:Boolean
			}
		},
		data() {
			return {
				defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
			};
		},
		filters:{
			// toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
			toFixed(num){
				return Number(num).toFixed(2)
			}
		},
		methods:{
			radioClickHandler(item){
				console.log(123)
				this.$emit('radioChange',{
					goodsState:!item.goods_state,
					goodsId:item.goods_id
				})
			},
			changeHanlder(option){
				this.$emit('numHandler',{
					goods_id:this.goods.goods_id,
					num:option.value
				})
			},
			gotoDetail(item){
				// ../goods_detail/goods_detail?goods_id=
				uni.navigateTo({
					url:"../../subpkg/goods_detail/goods_detail?goods_id="+item.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.head{
		line-height: 52rpx;
	}
	
.goods-item{
	display: flex;
	padding: 10px 5px;
	
	.goods-item-left{
		display: flex;
		align-items: center;
		position: relative;
		// width: 110px;
		
		.goods-pic{
			width: 100px;
			height: 100px;
			border-radius: 10px;
		}
	}
	
	.goods-item-right{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 10px;
		flex:1;
		height: 100px;
		
		.goods-name{
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			font-size: 13px;
			-webkit-box-orient: vertical;
		}
		.goods-info-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.goods-price{
				font-size: 16px;
				color: red;
			}
		}
		
	}
}
</style>
